<template>
  <view class="reversation-container">
    <!-- 通告栏 -->
    <view class="reversation-instruction">
      <uni-notice-bar show-icon scrollable text="这里存放预约须知信息" style="height: 10vh; margin-bottom: 0;" />
      <uni-popup class="upopup" ref="popup" type="center" background-color="#fff" :mask-click="false" v-show="showPopup">
        <view class="popup">
          <text class="title">预约须知</text>
          <rich-text class="popup-content" :style="{ height: wh * 0.7 + 'px' }">
            <content></content>
          </rich-text>
          <button @click="closePopup" id="btn-close" :disabled="time !== 0">
            {{ time === 0 ? '确认已阅读' : `阅读并确认以上内容（${time}）` }}
          </button>
        </view>
      </uni-popup>
    </view>

    <view class="reversation-content">
      <!-- 左边楼层栏 -->
      <view class="left-sidebar">
        <scroll-view class="scroll-left-list" show-scrollbar scroll-y="true">
          <block v-for="item in 3" :key="item">
            <view class="list-item" :class="{ active: item === activeIndex }" @click="activeChanged(item)">楼层L{{ item + 1
            }}</view>
          </block>
        </scroll-view>
      </view>

      <!-- 右边研讨室内容栏 -->
      <view class="right-sidebar">
        <scroll-view class="scroll-right-list" scroll-y="true" :scroll-top="scrollTop">
          <view class="content-list">
            <view class="list-item" v-for="item in roomlist" :key="item" @click="goToDetail(item.id)">
              <text class="item-text">{{ item.name }}</text>
              <uni-icons class="icon-right" type="forward"></uni-icons>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import content from '@/components/reservation_content/reservation_content.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  components: {
    content,
  },
  data () {
    return {
      scrollTop: 0,
      // 窗口的可用高度
      wh: 0,
      // 激活索引
      activeIndex: 0,
      // 倒计时
      timer: null,
      showPopup: false,
      roomlist: [],
    }
  },
  computed: {
    ...mapState('reservation', ['time']),
    ...mapState('user', ['token']),

  },
  onLoad () {
    // 获取当前系统的信息
    const sysInfo = uni.getSystemInfoSync()
    // 为 wh 窗口可用高度动态赋值
    this.wh = sysInfo.windowHeight
    this.getRoomFloor(this.activeIndex)
  },
  onShow () {
    this.$nextTick(() => {
      if (this.time !== 0) {
        this.openPopup()
      }
    })

  },
  onHide () {
    clearInterval(this.timer)
    this.timer = null
    if (this.time !== 0) {
      this.resetTime()
    }
  },
  methods: {
    ...mapMutations('reservation', ['subTime', 'resetTime']),
    activeChanged (i) {
      this.activeIndex = i
      this.scrollTop = this.scrollTop === 0 ? 1 : 0
      this.getRoomFloor(i)
    },
    async getRoomFloor (i) {
      try {
        const res = await uni.$http.post('room/floor', {
          floor: i + 1,
        })
        this.roomlist = res.data.data
      } catch (error) {
        console.error(error)
      }
    },
    // 弹出预约须知内容
    openPopup () {
      this.showPopup = true
      this.$refs.popup.open('center')
      this.InternvalBegin()
    },
    closePopup () {
      this.$refs.popup.close()
      this.showPopup = false
    },
    // 5秒后才可以点击阅读完成
    InternvalBegin () {
      if (!this.timer) {
        this.timer = setInterval(() => {
          this.subTime()
          if (this.time == 0) {
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },

    //跳转到详情房间
    goToDetail (id) {
      if (!this.token) {
        return uni.navigateTo({
          url: `/subpackage/login/login?isLogin=1`
        })
      }

      uni.navigateTo({
        url: `/subpackage/room_detail/room_detail?room_id=${id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.reversation-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;

  // 通告栏
  .reversation-instruction {



    // 弹出框
    .upopup {
      .popup {
        display: flex;
        flex-direction: column;
        width: 600rpx;

        .title {
          font-size: 36rpx;
          font-weight: 700;
          text-align: center;
          background-color: #f8f8f8;
          height: 80rpx;
          line-height: 80rpx;
        }

        .popup-content {
          padding: 20rpx 40rpx;
          overflow: auto;
          font-size: 24rpx;
          background-color: #fff;
          line-height: 48rpx;
        }

        button {
          margin-top: 30rpx;
          font-size: 28rpx;
          font-weight: 700;
          border: none;
          width: 100%;
          background-color: #f8f8f8;
          height: 80rpx;
          line-height: 80rpx;
        }
      }
    }
  }



  // 左右信息栏
  .reversation-content {
    display: flex;
    justify-content: space-between;
    overflow: hidden;

    // 左边楼层栏
    .left-sidebar {
      width: 200rpx;
      background-color: #eaeaea;

      .scroll-left-list {
        height: 90vh;

        .list-item {
          height: 100rpx;
          line-height: 100rpx;
          padding: 0 10rpx;
          text-align: center;

          &.active {
            position: relative;
            background-color: #fff;
            color: red;

            &::before {
              content: '';
              position: absolute;
              top: 10rpx;
              left: 0;
              height: 80rpx;
              width: 6rpx;
              background-color: #c00000;
            }
          }
        }
      }
    }

    // 右边研讨室内容栏
    .right-sidebar {
      flex: 1;

      .scroll-right-list {
        // height: calc(90vh-10px);

        .content-list {
          background-color: #fff;
          padding: 20rpx 0;

          .list-item {
            height: 80rpx;
            line-height: 80rpx;
            text-align: left;
            padding: 0 20rpx;
            border-bottom: 1px gray solid;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &:last-child {
              border: none;
            }

            .item-text {
              font-size: 38rpx;
            }

          }
        }
      }
    }
  }
}

// 轮播栏
:deep(.uni-noticebar) {
  margin-bottom: 0;
}
</style>
